import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';
import Input from '../../components/input/inpuTest';

export const Register = () => {
	/* для  DevTool зависимостью является control*/
	const {
  	register,
  	handleSubmit,
  	control,
  	formState: { errors, touchedFields }
	} = useForm<FieldValues>();

	const onSubmit = (data: FieldValues) => {
  	console.log(data);
	};
	return (
  	<div>
  		{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
  		<h2>Регистрация</h2>
  		<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
				<div className={styles.input}>
					<label htmlFor="email">Ваш email</label>
					<input id="name" {...register('name', {
						required: 'Обязательное поле',
						validate: {
							isAdmin: (fieldValue) => {
								return fieldValue !== 'admin' || 'Используйте другое имя';
							},
							isOleg: (fieldValue) => {
								return fieldValue !== 'Олег' || 'Используйте другое имя';
							}
						}
					})} type='text' />
					{errors.name?.message && <p style={{ color: 'red' }}>{errors.name?.message}</p>}
  			</div>
  			<div className={styles.input}>
  				<label htmlFor="password">Ваш пароль</label>
  				<Input
  					{...register('password')}
  					id="password"
  					name="password"
  					type="password"
  					placeholder="Пароль"
  				/>
  			</div>
  			<div className={styles.input}>
  				<label htmlFor="fullName">Ваше имя</label>
  				<Input
  					{...register('fullName')}
  					id="fullName"
  					name="fullName"
  					placeholder="Имя"
  				/>
  			</div>
  			<Button appearance="big">Зарегистрироваться</Button>
  		</form>
  		<DevTool control={control} />
  		<div className={styles.navigation}>
  			<div>
          Есть аккаунт?{' '}
  				<Link
  					style={{ color: '#ffa600' }}
  					className={styles.href}
  					to="/auth/login"
  				>
            Войти
  				</Link>
  			</div>
  			<div>
  				<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
  				</Link>
  			</div>
  		</div>
  	</div>
	);
};
